import React, { Component } from 'react'
// import Scroll from '../Scroll/Scroll'
import Child from './child'

export default class Life extends Component {

    // 加载完成之后
    componentDidMount() {
        // 标准来说是ajax写在这里
        console.log("componentDidMount")
        console.log(this.state)
    }
    constructor() {
        super()
        console.log("constructor")
        this.state = {
            isShow:true,
            num:0,
            todolist:[],
            todoText:""
        }
    }
    changeText = (event)=>{
        this.setState({todoText:event.target.value})
    }
    // 添加方法
    add = ()=>{
        let { todolist } = this.state
        todolist.push({
            value:this.state.todoText
        })
        this.setState({
            todolist
        })
    }
    render() {
        console.log("render")
        return (
        <div>
            {
                this.state.isShow && <Child num={this.state.num}></Child>
            }
            <button onClick={()=>{this.setState({isShow:!this.state.isShow})}}>切换显示</button>
            <hr />
            <span id="span">{this.state.num}</span>
            <button onClick={()=>{this.setState({num:++this.state.num})}}>+</button>
            <hr />
            <input type="text" onChange={this.changeText} value={this.state.todoText} placeholder='请输入'/>
            <button onClick={this.add}>添加</button>
            {/* <Scroll></Scroll> */}
            {
                this.state.todolist.map((item,index)=>{
                    return (
                        <p key={index}>{item.value}</p>
                    )
                })
            }
            添加的个数{this.state.todoLength}
        </div>
        )
    }
   
    // 组件将要销毁
    componentWillUnmount() {
        console.log("componentWillUnmount")
    }

    // 获取衍生状态在props中
    static getDerivedStateFromProps(Props,state) {
        console.log(Props,state)
        console.log("getDerivedStateFromProps")
        return {
            todoLength:state.todolist.length
        }
    }
    // 组件更新完毕
    // componentDidUpdate() {
    //     console.log("componentDidUpdate")
    // }
    // shouldComponentUpdate(props) {
    //     console.log("shouldComponentUpdate")
    //     return true
        
    // }
    // UNSAFE_componentWillReceiveProps(props) {
    //     console.log("UNSAFE_componentWillReceiveProps",props)
    // }
}
